<template>
  <div>
    <!-- <h1>分类</h1> -->
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" @click-left="$router.back()" left-arrow />
    <!-- 侧边栏导航 -->
    <div class="cateInfo">
      <van-sidebar @change="cahangeBar" v-model="activeKey">
        <van-sidebar-item
          v-for="item in catelist"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item :to="'/list?id='+item.id" v-for="item in secondCate" :key="item.id">
          <van-image :src="item.img" />
          <p>{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCate } from "../request/api";
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
      secondCate: [],
    };
  },
  mounted() {
    //调取分类接口
    getCate().then((res) => {
      console.log(res, "分类列表");
      if (res.code == 200) {
        this.catelist = res.list;
        this.secondCate = res.list[0].children;
      }
    });
  },
  methods: {
    //封装一个切换事件
    cahangeBar() {
      //重新给二级分类赋值
      this.secondCate = this.catelist[this.activeKey].children;
    },
  },
};
</script>

<style scoped>
.cateInfo {
  display: flex;
}
.van-grid {
  flex: 1;
}
</style>